<template>
  <div id="box">
    <header>
      <nav>
        <NavBar title="问宠医" />
        <van-search
          v-model="searchVal"
          shape="round"
          ref="search"
          placeholder="搜一搜"
          @search="$router.push('/doctor?word=' + searchVal)"
        />
      </nav>
      <a href="https://m.moguvet.com/about/trust?index=2" class="btm">
        <div class="btmLeft">
          <p>放心问 <span>|</span> 专业安全</p>
          <div class="itemBox">
            <div class="item">
              <van-icon name="certificate" color="#bda36c" size="12"
                >真实临床兽医</van-icon
              >
            </div>
            <div class="item">
              <van-icon name="medal-o" color="#bda36c" size="12"
                >双重审核</van-icon
              >
            </div>
            <div class="item">
              <van-icon name="manager-o" color="#bda36c" size="12"
                >6项监管措施</van-icon
              >
            </div>
          </div>
        </div>
        <van-icon class="btmRight" name="arrow" color="#bda36c" />
      </a>
      <AskIll />
      <div class="content">
        <div class="types">
          <h2>
            宠物品种
            <van-button
              style="
                height: 30px;
                border: none;
                background-color: #f2fbf9;
                border-radius: 35px;
                font-weight: normal;
              "
              plain
              type="success"
              @click="$router.push('/consult/text')"
              >不知道问哪位医生<van-icon name="arrow"
            /></van-button>
          </h2>
          <van-grid
            :border="false"
            :icon-size="40"
            :gutter="10"
            clickable
            :column-num="3"
            style="background-color: #fafafa"
          >
            <van-grid-item
              v-for="(item, index) in petTypes"
              :key="item.name"
              :icon="item.img"
              :text="item.name"
              style="font-weight: bolder"
              @click="
                $router.push('/doctor/list?class_id=' + (index + 1)),
                  store.changeParams({
                    class_id: index + 1,
                    sort_type: 'weight',
                  })
              "
            />
          </van-grid>
        </div>
        <Symptoms style="width: 100%" />
      </div>
      <div class="list">
        <a href="https://m.moguvet.com/about/trust?index=2">
          <h2>推荐医生</h2>
          <p>为您提供一站式医疗服务<van-icon name="arrow" /></p>
        </a>
        <div class="tabs">
          <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab title="全部"><DoctorList /></van-tab>
            <van-tab v-for="item in petTypes" :key="item.id" :title="item.name"
              ><DoctorList
            /></van-tab>
            <van-tab title=""></van-tab>
          </van-tabs>
        </div>
        <template>
          <van-button
            id="btn"
            type="default"
            icon="apps-o"
            @click="showPopup"
          ></van-button>
          <van-popup
            v-model:show="show"
            closeable
            close-icon="arrow-down"
            position="top"
            :style="{ height: '30%' }"
          >
            <h2 style="margin: 20px 20px">请选择</h2>
            <div class="popupContent">
              <van-button
                @click="
                  store.changeParams({ class_id: '' }),
                    (active = 0),
                    (show = false)
                "
                type="default"
                style="
                  height: 30px;
                  border-radius: 20px;
                  margin: 0 10px 15px 0;
                  background-color: #fafafa;
                  border: none;
                "
                >全部</van-button
              >
              <van-button
                @click="
                  store.changeParams({ class_id: item.id }),
                    (active = item.id),
                    (show = false)
                "
                type="default"
                v-for="item in petTypes"
                :key="item.id"
                style="
                  height: 30px;
                  border-radius: 20px;
                  margin: 0 10px 15px 0;
                  background-color: #fafafa;
                  border: none;
                "
                >{{ item.name }}</van-button
              >
            </div>
          </van-popup>
        </template>
      </div>
      <a href="https://m.moguvet.com/guide/help" id="fixedDiv">
        <img
          src="https://cdn.moguvet.com/custom/front/c/mine/fab-mine.png-avatar.200.200"
          alt=""
        />
      </a>
    </header>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Symptoms from "../../components/Symptoms.vue";
import DoctorList from "../../components/Doctor/DoctorList.vue";
import NavBar from "../../components/NavBar.vue";
import AskIll from "../../components/Doctor/AskIll.vue";
import { useRouter } from "vue-router";
import { useCount } from "../../store/index";
let store = useCount();
let searchVal = ref("");
let show = ref(false);
let active = ref(0);
let showPopup = () => {
  show.value = true;
};
const onClickLeft = () => {
  history.back();
};
// 卡片数组
let cardList = ref([]);
cardList.value = [
  {
    img: "https://cdn.moguvet.com/custom/front/doctor/text.png",
    title: "快速问医生",
    info: "无需选择 自动匹配",
    to: "/consult/text",
  },
  {
    img: "https://cdn.moguvet.com/custom/front/newConsult/new-tel.png",
    title: "名医电话",
    info: "快速接通 可传图片",
  },
];
// 宠物品种数组
let petTypes = ref([]);
petTypes.value = [
  {
    id: 1,
    name: "狗狗",
    img: "	https://cdn.moguvet.com/custom/front/newConsult/gougou.png",
  },
  {
    id: 2,
    name: "猫咪",
    img: "	https://cdn.moguvet.com/custom/front/newConsult/maomi.png",
  },
  {
    id: 3,
    name: "小宠",
    img: "	https://cdn.moguvet.com/custom/front/newConsult/xiaochong.png",
  },
  {
    id: 4,
    name: "水族",
    img: "	https://cdn.moguvet.com/custom/front/newConsult/shuizu.png",
  },
  {
    id: 5,
    name: "鸟",
    img: "	https://cdn.moguvet.com/custom/front/newConsult/niao.png",
  },
  {
    id: 6,
    name: "爬虫",
    img: "	https://cdn.moguvet.com/custom/front/newConsult/pachong.png",
  },
];
let onClickTab = ({ title }) => {
  console.log(title);
  let classId = petTypes.value.findIndex((item) => item.name == title) + 1;
  // console.log(classId);
  store.changeParams({ class_id: classId, code: "" });
};
</script>
<style scoped>
#box {
  padding: 0 30px;
}
.btm {
  width: 100%;
  height: 135px;
  color: #bda36c;
  background-color: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;
  padding: 20px 20px 20px 40px;
  box-sizing: border-box;
  margin: 20px 0 50px 0;
}
.btmLeft {
  display: flex;
  flex-direction: column;
}
.btmLeft p {
  font-size: 26px;
  font-weight: bolder;
}
.itemBox {
  font-size: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.item {
  margin-right: 40px;
}

.content {
  margin-top: 100px;
}
.types h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
.types {
  margin-bottom: 30px;
}
.list a {
  display: flex;
  flex-direction: column;
  color: black;
}
.list a p {
  color: #868686;
  margin: 10px 0;
}
.list {
  position: relative;
}

#btn {
  font-size: 40px;
  width: 40px;
  border: none;
  position: absolute;
  top: 100px;
  right: -20px;
}
.popupContent {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
  justify-content: flex-start;
  margin: 50px 0;
}
#fixedDiv {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 300px;
  right: 30px;
}
#fixedDiv img {
  width: 100px;
  height: 100px;
}
</style>